<template>
    <div class="rangeStatistics">
        <div style="margin: 0px 0px 10px 0px; display: flex;justify-content: flex-end;">
            <el-radio-group v-model="qualityway" @change="quality_operation_reminderObj()">
                <el-radio-button label="1">月</el-radio-button>
                <el-radio-button label="2">周</el-radio-button>
            </el-radio-group>
        </div>
        <div id="EChart" :style="{ height: height + 'px' }" :key="qualityway"></div>
        <!-- <div style="margin: 0px 0px 10px 0px; display: flex;justify-content: flex-end;">
            <el-radio-group v-model="qualityway" @change="quality_operation_reminderObj()">
                <el-radio-button label="1">月</el-radio-button>
                <el-radio-button label="2">周</el-radio-button>
            </el-radio-group>
        </div>
        <div>
            <el-table :data="qualityTableData.result" @cell-click="handleCellClick">
                <el-table-column v-for="column in qualityTableData.item_list" :key="column.show_name"
                    :prop="column.show_name" :label="column.title">
                </el-table-column>
            </el-table>
        </div> -->
    </div>
</template>

<script>
    import {
        overtimerecordsshow, quality_operation_reminder_loss_statistics
    } from "@/api/Largewidthmeterlist";
    import echarts from 'echarts'
    export default {
        name: 'rangeStatistics',
        components: {},
        props: {
            "option": {

            },
            "id": {},
            'height': {
                default() {
                    return '250';
                },
            }
        },
        data() {
            return {
                qualityTableData: [],
                qualityway: "1",
            };
        },
        mounted() {

            this.quality_operation_reminderObj();

        },
        methods: {
            getRenderer() {
                var dataPara = []
                for (var i = 0; i < this.qualityTableData.result.x.length - 1; i++) {
                    dataPara.push({ type: 'bar',itemStyle: {normal: {label: {show:true,position:'top',textStyle:{
                        color:'#5E5E5E',fontSize:9
                    }}}} })
                }
                // 基于准备好的dom，初始化echarts实例
                let EChart = this.$echarts.init(document.getElementById("EChart"));
                EChart.on('click', (param) => {
                    this.handleCellClick(param.value.customer_area_id, param.seriesName)
                })
                // 配置参数
                let config = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        dimensions: this.qualityTableData.result.x,
                        source: this.qualityTableData.result.y
                    },
                    xAxis: { type: 'category' },
                    yAxis: { type: 'value', inverse: true, },
                    series: dataPara,
                  
                };
                // 设置参数
                EChart.setOption(config);
            },

            quality_operation_reminderObj() {
                var param = {
                    "way": this.qualityway * 1, // 1月，2周，3天
                    // "way":2
                }
                quality_operation_reminder_loss_statistics(param).then((res) => {
                    this.qualityTableData = res.data.data
                    this.getRenderer();
                })
            },
            handleCellClick(row, column, event) {
                this.$router.push({
                    path: "/OperationReminder/costAbnormalList",
                    query: { customer_area_id: row, label: column, way: this.qualityway * 1 },
                });
            },
        },
    };
</script>
<style lang="scss" scoped>
    .rangeStatistics {}
</style>